<template>
  <el-row class="contnet">
    <el-col id="left-tree" class="left-tree" :span="4">
      <group @select="handleSelectGroup"></group>
      <div id="resize" class="resize" title="收缩侧边栏">⋮</div>
    </el-col>
    <el-col id="right-content" class="right-content" :span="20">
      <define :selectedGroup="selectedGroup"></define>
    </el-col>
  </el-row>
</template>

<script>
import group from "./group.vue";
import define from "./define.vue";
export default {
  components: { group, define },
  data() {
    return {
      selectedGroup: null,
    };
  },
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    handleSelectGroup(data, node) {
      this.selectedGroup = data;
    },
    dragControllerDiv() {
      let left = document.getElementById("left-tree");
      let line = document.getElementById("resize");
      let right = document.getElementById("right-content");
      // 鼠标按下事件
      line.onmousedown = function (e) {
        let startX = e.clientX;
        line.left = line.offsetLeft;
        // 鼠标拖动事件
        document.onmousemove = function (e) {
          let moveLen = line.left + (e.clientX - startX);
          if (
            moveLen >= document.body.clientWidth * 0.1 &&
            moveLen <= document.body.clientWidth * 0.4
          ) {
            line.style.left = moveLen + "px";
            left.style.width = moveLen + "px";
            right.style.width = document.body.clientWidth - moveLen + "px";
          }
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.contnet {
  height: 100%;
  display: flex;
}
.left-tree {
  position: relative;
  height: 100%; // 如果存在box-sizing，此处设置就会用会影响，可以先去掉看看效果
  background: #fff;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
  border-radius: 4px;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 10px 0 0 10px;
  margin-right: 8px;
}
.resize {
  cursor: col-resize;
  position: absolute;
  top: 45%;
  right: -8px;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: 50%;
  font-size: 32px;
  color: #fff;
}
.right-content {
  display: inline-block;
  height: 100%;
  background: #fff;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  vertical-align: top;
  overflow: auto;
}
</style>
